<template>
    <div class="updatePwd-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>修改密码</BreadcrumbItem>
        </Breadcrumb>
        <!-- 修改密码区域 -->
        <div class="updatePwd-info">
            <b-row align-h="center">
                  <b-col cols="12" sm="12" md="6" lg="6">
                      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                          <FormItem prop="credential">
                              <Input type="password" v-model="formValidate.credential" placeholder="请输入原密码" />
                          </FormItem>
                          <FormItem prop="newCredential">
                              <Input type="password" v-model="formValidate.newCredential" placeholder="请输入新密码" />
                          </FormItem>
                          <FormItem prop="confirm">
                              <Input type="password" v-model="formValidate.confirm" placeholder="请再次确认密码" />
                          </FormItem>
                          <FormItem>
                              <Button type="primary" @click="updateCredential('formValidate')" long>确认</Button>
                          </FormItem>
                      </Form>
                  </b-col>
            </b-row>
        </div>
    </div>
</template>

<script>
export default {
    name: 'updatePwd',
    data() {
        const validateCredential = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('原密码不能为空哦'))
            }
            // 模拟异步验证效果（判断原密码是否正确）
            setTimeout(() => {
                this.$axios({
                    url: 'userLoginAuths/findPwdByUserId',
                    method: 'get',
                    params: {
                        uId: JSON.parse(localStorage.getItem('user')).uId,
                        credential: this.formValidate.credential,
                    },
                    headers: {
                        Authorization: localStorage.getItem('token'),
                    },
                }).then(res => {
                    if (res.data === true) {
                        callback()
                    } else {
                        callback(new Error('原密码不正确'))
                    }
                })
            }, 1000)
        }
        const validateNewCredential = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'))
            } else {
                if (this.formValidate.newCredential !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.formValidate.validateField('confirm')
                }
                callback()
            }
        }
        const validateConfirm = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.formValidate.newCredential) {
                callback(new Error('两次密码不匹配'))
            } else {
                callback()
            }
        }

        return {
            // 识别标识密码验证
            formValidate: {
                credential: '',
                newCredential: '',
                confirm: '',
            },
            ruleValidate: {
                credential: [
                    { validator: validateCredential, trigger: 'blur' },
                ],
                newCredential: [
                    { validator: validateNewCredential, trigger: 'blur' },
                ],
                confirm: [
                    { validator: validateConfirm, trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        // 修改密码凭证
        updateCredential(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: 'userLoginAuths/updateCredential',
                        method: 'get',
                        params: {
                            ulaUid: JSON.parse(localStorage.getItem('user')).uId,
                            ulaCredential: this.formValidate.newCredential,
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            // 跳回登录页面
                            this.$router.push({ path: '/login' })
                        }
                    })
                }
            })
        },
    },
}
</script>

<style scoped>
.updatePwd-info {
  margin-top: 60px;
  min-height: 400px;
}
</style>